import { BasicColumn, FormSchema } from '@/components/Table';
import { h, ref, onMounted } from 'vue';
import { getUserMapAPI } from '@/api/demo/device';
import { useI18n } from '@/hooks/web/useI18n';

const { t } = useI18n();
let userList = [];

async function getUserMap() {
  const value = await getUserMapAPI();
  userList = value.data;
}

getUserMap();

// 表头数据
export const columns: BasicColumn[] = [
  {
    title: 'id',
    dataIndex: 'id',
    width: 30,
  },
  {
    title: t('sys.device.columns.devicecode'),
    dataIndex: 'devicecode',
    width: 100,
  },
  {
    title: t('sys.device.columns.devicename'),
    dataIndex: 'devicename',
    width: 100,
  },
  {
    title: t('sys.configuration.describe'),
    dataIndex: 'remark',
    width: 120,
  },
  {
    title: t('sys.code.title'),
    dataIndex: 'code',
    width: 50,
  },
  {
    title: t('sys.device.columns.status'),
    dataIndex: 'status',
    width: 80,
    customRender: ({ text }) => {
      const color =
        text === '在线' ? 'green' : text === '离线' ? 'red' : text === '运行' ? 'blue' : 'black';
      return h('span', { style: { color } }, text);
    },
  },
  {
    title: t('sys.informaionMatchaing.columns.status'),
    dataIndex: 'current',
    width: 50,
  },
  {
    title: t('sys.device.columns.validTime'),
    dataIndex: 'validTime',
    width: 50,
  },
  {
    title: t('sys.code.columns.account'),
    dataIndex: 'userId',
    width: 80,
    customRender: ({ text }) => {
      const user = userList.find((u) => u.value == text);
      return user ? user.label : '-';
    },
  },
  {
    title: t('sys.device.columns.remck'),
    dataIndex: 'owner',
    width: 50,
  },
];

export const columnsError: BasicColumn[] = [
  {
    title: 'id',
    dataIndex: 'id',
    width: 30,
  },
  {
    title: t('sys.device.columns.devicecode'),
    dataIndex: 'device',
    width: 50,
  },
  {
    title: t('sys.device.columns.version'),
    dataIndex: 'version',
    width: 30,
  },
  {
    title: t('sys.device.columns.type'),
    dataIndex: 'type',
    width: 30,
  },
  {
    title: t('sys.device.columns.time'),
    dataIndex: 'date',
    width: 50,
  },
  {
    title: t('sys.device.columns.valueXui'),
    dataIndex: 'valueXui',
    width: 50,
  },
  {
    title: t('sys.device.columns.valuePng'),
    dataIndex: 'valuePng',
    width: 50,
  },
  {
    title: t('sys.device.columns.log'),
    dataIndex: 'type',
    width: 50,
  },
];

export const accountFormSchema: FormSchema[] = [
  {
    field: 'device',
    component: 'Input',
    label: t('sys.device.columns.devicecode'),
    defaultValue: '',
    rules: [{ required: true }],
  },
  {
    field: 'authorizationCode',
    component: 'Input',
    label: t('sys.code.title'),
    defaultValue: '',
    rules: [{ required: true }],
  },
];

// 基础字段
export const accountFormSchemaFields: FormSchema[] = [
  {
    field: 'title',
    component: 'Input',
    label: t('sys.video.columns.submitTitel'),
    defaultValue: '',
    rules: [{ required: true }],
  },
  {
    field: 'title',
    component: 'RadioGroup',
    label: t('sys.video.columns.isPhoto'),
    defaultValue: '',
    componentProps: {
      options: [
        {
          label: t('sys.configuration.YES'),
          value: '1',
        },
        {
          label: t('sys.configuration.NO'),
          value: '2',
        },
      ],
    },
    rules: [{ required: true }],
  },
  {
    field: 'title',
    component: 'RadioGroup',
    label: t('sys.video.columns.submitType'),
    defaultValue: '',
    rules: [{ required: true }],
    componentProps: {
      options: [
        {
          label: t('sys.video.columns.trueType'),
          value: '1',
        },
        {
          label: t('sys.video.columns.selectType'),
          value: '2',
        },
        {
          label: t('sys.video.columns.selectListType'),
          value: '3',
        },
      ],
    },
  },
  {
    field: 'title',
    component: 'Input',
    label: t('sys.video.columns.configurationOptions'),
    defaultValue: '',
    rules: [{ required: true }],
  },
];

// 设置备注字段
export const remarkFormSchema = [
  {
    field: 'owner',
    label: t('sys.device.columns.remck'),
    component: 'Input',
    colProps: { span: 24 },
  },
];
